<template>
  <div class="order">
    <div class="content">
      <div class="side-nav"></div>
      <div class="con-box">
        <div class="nav">
          <div class="nav-box">
            <div class="nav-item">
              <span class="text">我的订单</span>
            </div>
          </div>
        </div>
        <div class="order-list">
          <div class="order-table">
            <table cellspacing="0" cellpadding="0" class="box">
              <tbody>
                <tr class="box-tit">
                  <th>商品</th>
                  <th width="110">数量</th>
                  <th width="120" style="padding-right: 20px">单价</th>
                  <th width="130">总额</th>
                  <th width="130">状态</th>
                  <th width="130">操作</th>
                </tr>
              </tbody>
              <tbody v-for="(item, index) in orderData" :key="item._id">
                <tr class="box-space">
                  <td colspan="6"></td>
                </tr>
                <tr class="box-hd">
                  <td colspan="6">
                    <div class="time"></div>
                    <div class="order-number">
                      订单号：<span class="num">{{ item.orderNumber }}</span>
                    </div>
                    <el-popconfirm
                      title="确定删除该订单吗?删除后将无法恢复"
                      confirm-button-text="确定"
                      cancel-button-text="取消"
                      @confirm="handleDeleteOrder(item.orderNumber)"
                    >
                      <template #reference>
                        <div class="del"></div>
                      </template>
                    </el-popconfirm>
                  </td>
                </tr>
                <tr class="box-tr" v-for="(p, index) in item.items">
                  <td>
                    <div class="goods-info">
                      <a href="javascript:;" class="img" @click="toDetail(p)">
                        <img
                          :src="
                            p.productId
                              ? p.productId.productImage
                              : p.charProductId.productImage
                          "
                          alt=""
                        />
                      </a>
                      <div class="name-sku">
                        <a href="javascript:;" class="name" @click="toDetail(p)">{{
                          p.productId
                            ? p.productId.description
                            : p.charProductId.description
                        }}</a>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="goods-number">x{{ p.quantity }}</div>
                  </td>
                  <td style="padding-right: 20px">
                    <div class="amount">
                      <div class="price">
                        <span>￥{{ p.price.toFixed(2) }}</span>
                      </div>
                    </div>
                  </td>
                  <td rowspan="2" class="bl" v-if="index == 0">
                    <div class="amount">
                      <div class="price">
                        <span>￥{{ item.totalPrice.toFixed(2) }}</span>
                      </div>
                      在线支付
                    </div>
                  </td>
                  <td rowspan="2" class="bl" v-if="index == 0">
                    <div class="status">
                      <div
                        class="text"
                        :class="{ 'no-finish': item.status == '待支付' }"
                      >
                        {{ item.status }}
                      </div>
                    </div>
                  </td>
                  <td rowspan="2" class="bl" v-if="index == 0">
                    <div class="action">
                      <a
                        href="javascript:;"
                        class="action-btn active"
                        v-if="item.status == '待支付'"
                        @click="handlePayOrder(item.orderNumber)"
                        >立即付款</a
                      >
                      <a
                        href="javascript:;"
                        class="action-btn active"
                        v-if="item.status == '待支付'"
                        @click="handleCancelOrder(item.orderNumber)"
                        >取消订单</a
                      >
                      <a href="javascript:;" class="action-btn default" v-else @click="toDetail(p)"
                        >再次购买</a>
                        <a href="javascript:;" class="action-btn default" v-show="item.status=='待收货'" @click="confirmGoods(item.orderNumber)"
                        >确认收货</a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="order">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { reqOrderList, deleteOrder,cancelOrder,payOrder,receiptOrder } from "@/api/order";
import { ElMessage } from "element-plus";
import useUserStore from "@/stores/modules/user";

//获取路由器对象
let $router = useRouter();
let $route = useRoute();

let userName = useUserStore().user.userName;
let userId = useUserStore().user._id
let orderData = ref<any>([]);

// 获取订单信息
const getOrderInfo = async () => {
  let result = await reqOrderList(userName);
  if (result.code == 200) {
    orderData.value = result.data;
  } else {
    ElMessage.error(result.msg);
  }
};

// 删除订单
const handleDeleteOrder = async (orderNumber: string) => {
  console.log(orderNumber);
  let result = await deleteOrder(orderNumber);
  if (result.code == 200) {
    ElMessage.success(result.msg);
    getOrderInfo();
  } else {
    ElMessage.error(result.msg);
  }
};

// 确认收货
const confirmGoods = async (orderNumber:string) => {
  let data = {orderNumber}
  let result = await receiptOrder(data)
  if(result.code == 200){
    ElMessage.success(result.msg)
    getOrderInfo()
  }else{
    ElMessage.error(result.msg)
  }
}

// 点击立即支付的回调
const handlePayOrder = async (orderNumber:string) => {
  let data = {userId,orderNumber}
  let result = await payOrder(data)
  if(result.code == 200){
    ElMessage.success(result.msg)
    getOrderInfo()
  }else{
    ElMessage.error(result.msg)
  }
}

// 点击取消订单的回调
const handleCancelOrder = async (orderNumber:string) => {
  let data = {orderNumber}
  let result = await cancelOrder(data)
  if(result.code == 200){
    ElMessage.success(result.msg)
    getOrderInfo()
  }else{
    ElMessage.error(result.msg)
  }
}

// 点击跳转到详情页
const toDetail = (row:any) => {
  if (row.productId) {
    $router.push({
      path: `/detail/${row.productId._id}`,
      query: { product: 1 },
    });
  } else {
    $router.push({
      path: `/detail/${row.charProductId._id}`,
      query: { charProduct: 1 },
    });
  }
}

onMounted(() => {
  getOrderInfo();
});
</script>

<style lang="scss" scoped>
.order {
  min-height: 535px;
  padding-bottom: 40px;
  font-size: 12px;
  .content {
    display: flex;
    width: 1100px;
    margin: auto;
    margin-top: 30px;
    .side-nav {
      width: 120px;
    }
    .con-box {
      flex: 1;
      padding-left: 6px;
      .nav {
        border-bottom: 1px solid #eee;
        margin: 15px 0;
        display: flex;
        .nav-box {
          position: relative;
          bottom: -1px;
          flex: 1;
          display: flex;
          .nav-item {
            .text {
              display: inline-block;
              line-height: 1;
              padding: 0 20px 12px;
              font-size: 18px;
              color: #000;
              font-weight: 500;
            }
          }
        }
      }
      .order-list {
        margin-top: 60px;
        .order-table {
          margin-bottom: 20px;
          .box {
            border: 1px solid #eee;
            width: 100%;
            .box-tit {
              th {
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: #f9f9f9;
                font-weight: 400;
                border: 1px solid #f9f9f9;
              }
            }
            .box-space td {
              padding: 0;
              height: 14px;
              border-left: 1px solid #fff;
              border-right: 1px solid #fff;
              border-top: 1px solid #eee;
              text-align: center;
            }
            .box-hd {
              background: #f9f9f9;
              .order-number {
                color: #999;
                float: left;
                text-align: left;
                .num {
                  font-family: arial;
                  color: #000;
                  vertical-align: top;
                  display: inline-block;
                }
              }
              .del {
                float: right;
                width: 14px;
                height: 14px;
                margin-top: 3px;
                background: url(../../assets/icons.d354c61.png) no-repeat 0 -415px;
                cursor: pointer;
                &:hover {
                  background-position: -19px -415px;
                }
              }
            }
            .box-hd td {
              background: #f9f9f9;
              height: 32px;
              padding: 0 15px;
              line-height: 18px;
              border-top: 1px solid #eee;
              text-align: center;
            }
            .box-tr {
              .goods-info {
                text-align: left;
                display: flex;
                padding-left: 15px;
                .img {
                  width: 60px;
                  height: 60px;
                  font-size: 0;
                  text-decoration: none;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .name-sku {
                  flex: 1;
                  margin: 0 15px;
                  .name {
                    max-height: 36px;
                    line-height: 18px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-decoration: none;
                    color: #000;
                  }
                }
              }
              .goods-number {
                line-height: 20px;
                color: #999;
              }
              .amount {
                line-height: 20px;
                color: #999;
                .price {
                  display: block;
                  color: #000;
                  font-family: arial;
                  font-size: 12px;
                }
              }
              .status {
                line-height: 20px;
                color: #999;
                .order-detail {
                  background: rgb(255, 255, 255);
                  color: #000;
                  text-decoration: none;
                  &:hover {
                    color: #e1251b;
                  }
                }
                .no-finish {
                  color: #e1251b;
                }
              }
              .action {
                line-height: 20px;
                color: #999;
                .action-btn {
                  display: block;
                  background: #fff;
                  border-radius: 2px;
                  width: 96px;
                  line-height: 18px;
                  padding: 2px 0;
                  margin: 3px auto;
                  text-align: center;
                  text-decoration: none;
                }
                .action-btn.default {
                  background: #f9f9f9;
                  border: 1px solid #eee;
                  color: #000;
                  &:hover {
                    background: #fff;
                    color: #e1251b;
                    border: 1px solid #e1251b;
                  }
                }
                .action-btn.active {
                  color: #e1251b;
                  border: 1px solid #e1251b;
                  &:hover {
                    background: #e1251b;
                    color: #fff;
                  }
                }
              }
            }
            .bl {
              border-left: 1px solid #eee;
            }
          }
          .box td {
            padding: 15px 0;
            border-top: 1px solid #eee;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>

<style>
div,
td {
  vertical-align: middle;
}
</style>
